import React, { Component } from 'react';
import { Form, Row, Col } from 'antd';
import ShowType from '../../../routes/common/showType';
import styles from '../../../index.less';

const FormItem = Form.Item;
class TabBasicInfoComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      masterConfig: props.masterConfig, /* 配置 */
      sId: props.sId, /* 业务数据Id */
      dataList: props.dataSet, /* 数据 */
      sActiveId: props.sActiveId, /* 窗体Id */
      disabled: props.disabled, /* 是否是查看状态 */
      sDegree: '', /* 学历 */
      sMarry: '', /* 婚姻 */
      tBirthday: '', /* 生日 */
      sOnJobLeft: '', /* 状态 */
      tInductionDate: '', /* 入职时间 */
      tDepartureDate: '', /* 离职时间 */
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const { masterConfig, sId } = this.state;
    if (masterConfig.gdsconfigformslave !== undefined) {
      const mainConfig = masterConfig.gdsconfigformslave;
      this.setState({
        sId: sId !== undefined ? sId : '',
        sDegree: mainConfig.filter(item => (item.sName.toLowerCase() === 'sdegree'))[0],
        sMarry: mainConfig.filter(item => (item.sName.toLowerCase() === 'smarry'))[0],
        tBirthday: mainConfig.filter(item => (item.sName.toLowerCase() === 'tbirthday'))[0],
        sOnJobLeft: mainConfig.filter(item => (item.sName.toLowerCase() === 'sonjobleft'))[0],
        tInductionDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tinductiondate'))[0],
        tDepartureDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tdeparturedate'))[0],
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const { disabled, dataSet } = nextProps;
    this.setState({ disabled, dataList: dataSet });
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { componentName } = nextProps;
    const { sId } = this.props;
    if (sId === undefined) {
      return true;
    }
    let flag = true;
    if (nextState.disabled !== this.state.disabled) {
      return true;
    }
    if (this.state.sTabId === nextProps.app.currentPane.key &&
      this.state.componentName === componentName) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  }

  render() {
    const {
      app, form, handleModalPane, dataName, dataType, handleSelectChange, onClose,
    } = this.props;
    const {
      dataList, sId, sActiveId, disabled,
    } = this.state;
    const childProps = {
      app,
      form,
      sActiveId,
      dataList,
      sId,
      disabled,
      handleModalPane,
      dataName,
      dataType,
      handleSelectChange,
      onClose,
    };
    const {
      sDegree, sMarry, tBirthday, sOnJobLeft, tInductionDate, tDepartureDate,
    } = this.state;
    const sDegreeProps = { showConfig: sDegree, ...childProps };
    const sMarryProps = { showConfig: sMarry, ...childProps };
    const tBirthdayProps = { showConfig: tBirthday, ...childProps };
    const sOnJobLeftProps = { showConfig: sOnJobLeft, ...childProps };
    const tInductionDateProps = { showConfig: tInductionDate, ...childProps };
    const tDepartureDateProps = { showConfig: tDepartureDate, ...childProps };
    return (
      <FormItem className={styles.searchSlaveForm}>
        <Row type="flex">
          <Col
            span={6}
            order={sDegree.iOrder > 24 ? 24 : sDegree.iOrder}
            style={{ display: sDegree.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sDegree" showDefaultName="学历" {...sDegreeProps} />
          </Col>
          <Col
            span={6}
            order={sMarry.iOrder > 24 ? 24 : sMarry.iOrder}
            style={{ display: sMarry.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sMarry" showDefaultName="婚姻" {...sMarryProps} />
          </Col>
          <Col
            span={6}
            order={tBirthday.iOrder > 24 ? 24 : tBirthday.iOrder}
            style={{ display: tBirthday.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tBirthday" showDefaultName="生日" {...tBirthdayProps} />
          </Col>
          <Col
            span={6}
            order={sOnJobLeft.iOrder > 24 ? 24 : sOnJobLeft.iOrder}
            style={{ display: sOnJobLeft.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sOnJobLeft" showDefaultName="状态" {...sOnJobLeftProps} />
          </Col>
          <Col
            span={6}
            order={tInductionDate.iOrder > 24 ? 24 : tInductionDate.iOrder}
            style={{ display: tInductionDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tInductionDate" showDefaultName="入职时间" {...tInductionDateProps} />
          </Col>
          <Col
            span={6}
            order={tDepartureDate.iOrder > 24 ? 24 : tDepartureDate.iOrder}
            style={{ display: tDepartureDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tDepartureDate" showDefaultName="离职时间" {...tDepartureDateProps} />
          </Col>
        </Row>
      </FormItem>
    );
  }
}

export default TabBasicInfoComponent;

